<template>
  <el-input-number class="input-money" v-bind="$props" :value="myValue" :min="myMin" :max="myMax" :bit="bit" @change="handleChange"/>
</template>

<script>
  import * as ui from 'l-element'
  let props = Object.assign({}, ui.default.InputNumber.props)
  export default {
    props: {
      ...props,
      bit: {
        type: Number,
        default: 0.01
      },
      max: {
        type: Number,
        default: 9999900
      },
      min: {
        type: Number,
        default: 0
      }
    },
    watch: {
      value (value) {
        let val = value / 100
        if (val < this.myMin) {
          val = this.myMin
        }
        if (val > this.myMax) {
          val = this.myMax
        }
        this.myValue = val
      },
      min (value) {
        let val = value / 100
        val = val <= this.myMax ? val : this.myMax
        this.myMin = val
      },
      max (value) {
        let val = value / 100
        val = val > this.myMin ? val : this.myMin
        this.myMax = val
      }
    },
    data () {
      return {
        myMax: this.max ? this.max / 100 : this.max,
        myMin: this.min ? this.min / 100 : this.min,
        myValue: this.value / 100
      }
    },
    methods: {
      handleChange (value) {
        value = Math.round(value * 100)
        this.$emit('change', value).$emit('input', value).$emit('blur', value)
      }
    }
  }
</script>

<style lang="scss">
  @import '~styles/var.scss';
  .input-money{
    position:relative;
    &:before{
      content: '￥';
      position: absolute;
      top: 50%;
      left: 2px;
      z-index: 10;
      color: #999;
      line-height: 12px;
      margin-top: -6px;
    }
    .el-input input{
      padding-left:15px!important;
    }
  }
</style>
